<template>
  <div class="client-app" style="padding-top: 32px;">
    <transition name="el-zoom-in-top">
      <el-row class="image-line" v-show="!inputStr.length > 0">
        <img src="@clientAssets/librarySearch/logo.png" />
      </el-row>
    </transition>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-radio-group v-model="searchType">
          <el-radio-button label="1">全部</el-radio-button>
          <el-radio-button label="2">图书</el-radio-button>
          <el-radio-button label="3">期刊</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px;">
      <el-col :span="12" :offset="6">
        <el-autocomplete
          style="width: 80%;height: 50px;"
          v-model="inputStr"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          :popper-append-to-body="false"
          placement="bottom-start"
          @select="handleSelect"
        ></el-autocomplete>
        <el-button icon="el-icon-search" type="primary" class="search-btn">搜索</el-button>
      </el-col>
    </el-row>
    <el-row :style="{ marginTop: '10px' }">
      <el-col :span="12" :offset="6">
        <el-radio-group v-model="radio">
          <el-radio
            style="margin-right: 14px;"
            :label="(index + 1).toString()"
            v-for="(item, index) in radioArr"
            :key="'radio' + item + index"
            >{{ item }}
          </el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="table-contain">
      <transition name="el-zoom-in-bottom">
        <SearchTable :searchText="inputStr" v-show="inputStr.length > 0" />
      </transition>
    </el-row>
  </div>
</template>

<script>
  import { radioArr } from './config'
  import SearchTable from './components/SearchTable'

  export default {
    name: 'index',
    components: {
      SearchTable
    },
    data() {
      return {
        searchType: '2',
        inputStr: '',
        radio: '1',
        radioArr
      }
    },
    methods: {
      handleSelect(item) {
        this.inputStr = item
      },
      querySearchAsync(queryString, cb) {
        console.log(queryString)
        // 加载数据
      }
    }
  }
</script>

<style lang="scss" scoped>
  .image-line {
    margin-top: 46px;
    text-align: center;
    img {
      width: 178px;
    }
  }

  .search-btn {
    width: 18%;
    height: 50px;
    margin-left: 2%;
    font-size: 18px;
    &:hover {
      color: #fff !important;
    }
  }

  .table-contain {
    min-height: 399px;
    padding: 0px 24px;
    margin-top: 20px;
  }
</style>
